<template>
    <el-container>
        <el-main>
            <div style="height: 228px;">
                <el-carousel :interval="4000" type="card" indicator-position="none" height="200px">
                    <el-carousel-item v-for="item in imglist" >
                        <el-image class="carouselimg" :src="item.img" @click="goTO(item)"></el-image>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </el-main>
        <el-dialog
            title="内部跳转链接"
            :visible.sync="dialogVisible"
            width="80%"
            style="
                padding-top: 0px;
                padding-bottom: 0px;
                padding-right: 0px;
                padding-left: 0px;"
            :before-close="handleClose">
            <el-header>
            </el-header>
            <iframe id="show-iframe"  width="100%" height="600px" frameborder=0 name="showHere" scrolling=auto :src="inside">
            </iframe>
        </el-dialog>
    </el-container>
    
</template>
<script>
import axios from 'axios';
import {adverts} from "../../api/advert";
export default {
  name: 'AdvIndex',
  data(){
    return {
        // imglist:[{"img":"/img/0.gif"},{"img":"/img/1.png"},{"img":"/img/2.png"}]
        imglist:[],
        dialogVisible:false,
        inside: ""
    }
  },
  mounted:function () {
      this.Getadverts();
  },
  methods:{
    goTO(item){
        if (item.type == 1){
            // window.location.href = item.Datas;
            this.inside =  item.Datas
            this.dialogVisible = true;
        }else if (item.type == 2){
            window.open(item.Datas,"_blank"); 
        }else if (item.type == 3){

        }

    },
    handleClose(done) {
        this.$confirm('确认关闭？').then(_ => {
            done();
        }).catch(_ => {});
    },
    Getadverts(){
      adverts().then(
        res => {
          let {code,msg,data} = res;
          if (code ==200){
            this.imglist = data.list;
          }
        })
    }
  }//methods
}
</script>

<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    /*line-height: 100px;*/
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    /*background-color: #99a9bf;*/
  }
  
  .el-carousel__item:nth-child(2n+2) {
    /*background-color: #d3dce6;*/
  }
  .carouselimg{
    /*margin-top: 20px;*/
    border-radius: 5px;
    /*max-height:80%;*/
    /*min-height:10%; */
  }
</style>